﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="AG_Apps_Cloud_Services_WCF_Web_Role.Apps.Dashboard" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/date.js"></script>
    <script 
         type="text/javascript" 
        src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js">
    </script>
    <script type="text/javascript" src="/_layouts/sp.runtime.js" ></script>
    <script type="text/javascript" src="/_layouts/SP.Core.js" ></script>
    <script type="text/javascript" src="/_layouts/SP.js" ></script>
    <script type="text/javascript" src="/_layouts/SP.UI.Dialog.js" ></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <!--<script type="text/javascript" src="../Scripts/yui-min.js"></script>-->
    <script type="text/javascript" src="../Scripts/yahoo-min.js"></script>
    <script type="text/javascript" src="../Scripts/knockout-3.0.0.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
            google.load('visualization', '1', { packages: ['corechart'] });
    </script>
    <script type="text/javascript" src="../Scripts/StockDashboard-1.0.7.js"></script>

    <link rel="stylesheet" type="text/css" href="AppD.css" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
</head>
<body class="the yui3-skin-sam">
    <script id="itemTmpl" type="text/html">
        <div class="Button" data-bind=" attr: { id: id }, text: TickerSymbol"></div>
    </script>

    <form id="form1" runat="server">
    <div id="AddorRemoveWatchListBox" style="display: none;">
        <div class='GB_caption'>Ticker Symbol modifier</div>
        <img src="../Images/closeIcon.png" id="closeIconId" data-bind="click: $root.onCloseAddorRemoveWatchListBox" />
        <div id="currentWatchList" data-bind="foreach: watchLDetail ">
            <div class="tickerSymbolLabel" data-bind="text: TickerSymbol, attr: { title: Title }"></div>
            <div class="tickerSymbolLabelDelete" data-bind="click: $root.onDeleteWatchListItem">X</div>
        </div>
        <input id="autoSuggestInput" class="tickerSymbolLabel" data-bind="value:inputTickerSymbol"/>
        <div class="tickerSymbolLabelDelete" data-bind="click: $root.onAddWatchListItem">+</div>
        <button class="buttonAddorRemoveWatchListBox" data-bind="click: $root.onOkAddorRemoveWatchListBox">Ok</button>
        <button class="buttonAddorRemoveWatchListBox" data-bind="click: $root.onOkAddorRemoveWatchListBox">Cancel</button>
    </div>
    <div id="waitingLayer" style="display: none;"></div>
    <div id="waitingdiv" style="display: none;">
        <img src="../Images/loading.gif" id="ajax-loader" />
        <header id="loadingLogo">Working on it...</header>
    </div>
    <div id="MainWindow">
        <div id="CommandTimeLine">
            <!-- ko ifnot: showByWeeks -->
            <div class="ButtonSelected">Day</div>
            <div class="Button" data-bind="click: $root.onChangeToWeek">Week</div>
            <!-- /ko -->
            <!-- ko if: showByWeeks -->
            <div class="Button" data-bind="click: $root.onChangeToDay">Day</div>
            <div class="ButtonSelected">Week</div>
            <!-- /ko -->
        </div>
        <div id="CommandCharts">
            <!-- ko ifnot: isShowCandleStickChart -->
            <div class="Button" data-bind="click: $root.onChangeCandleStick">CandleStick</div>
            <!-- /ko -->
            <!-- ko if: isShowCandleStickChart -->
            <div class="ButtonSelected" data-bind="click: $root.onChangeCandleStick">CandleStick</div>
            <!-- /ko -->
            <!-- ko ifnot: isShowIRSChart -->
            <div class="Button" data-bind="click: $root.onChangeIRS">RSI</div>
            <!-- /ko -->
            <!-- ko if: isShowIRSChart -->
            <div class="ButtonSelected" data-bind="click: $root.onChangeIRS">RSI</div>
            <!-- /ko -->
            <!-- ko ifnot: isShowVolumeChart -->
            <div class="Button" data-bind="click: $root.onChangeVolume">Volume</div>
            <!-- /ko -->
            <!-- ko if: isShowVolumeChart -->
            <div class="ButtonSelected" data-bind="click: $root.onChangeVolume">Volume</div>
            <!-- /ko -->
        </div>

        <div id="chartSelectionDisplay">
        <div class="StockStatistic">
            <div class="chartTitle" data-bind="text: currentCompanyTitle"></div>
            <div class="currentPrice" data-bind="text: currentStockPrice" style="font-weight:bold;float:left;margin:4px"></div>
            <div class="TrendIndicator">
            <!-- ko if: isPositiveResult-->
                <img src="../Images/up_g.gif"  style="float:left;margin:4px;margin-top:6px"/>
            <!-- /ko -->
            <!-- ko ifnot: isPositiveResult-->
                <img src="../Images/down_r.gif"  style="float:left;margin:4px;margin-top:6px"/>
            
            <!-- /ko -->
            </div>
            <div class="trendNum" data-bind="text: stockDifference" ></div>
            <div class="TrendRatio" data-bind="text: stockDifferenceRatio"></div>
            <div id="tiemSelection" data-bind="foreach: candleStickTimeline">
            <!-- ko ifnot: selected -->
            <div class="timeline" data-bind="click: $root.onChangeTimeLine, text: duration + ' M'"></div>
            <!-- /ko -->
            <!-- ko if: selected -->
            <div class="timelineSelected" data-bind="click: $root.onChangeTimeLine, text: duration + ' M'"></div>
            <!-- /ko -->
            </div>

        </div>
        <!-- ko if: hasResults -->
            <!-- ko if: isShowCandleStickChart -->
            <div id="chart_div"></div>
            <!-- /ko -->
            <!-- ko if: isShowVolumeChart -->
            <div id="chart_volume_div"></div>
            <!-- /ko -->
            <!-- ko if: isShowIRSChart -->
            <div id="chart_RSI_div"></div>
            <!-- /ko -->
        <!-- /ko -->

        <div id="selection" >
            <div id="Data">
               <div id="watchListData" data-bind="foreach: watchLDetail ">
                   <!-- ko ifnot: selected -->
                   <div class="Button" data-bind="click: $root.onChangeTicketSymbol, text: TickerSymbol, attr: {title:Title}"></div>
                   <!-- /ko -->
                   <!-- ko if: selected -->
                   <div class="ButtonSelected" data-bind="click: $root.onChangeTicketSymbol, text: TickerSymbol, attr: { title: Title }"></div>
                   <!-- /ko -->
               </div>
                <div class="Button" data-bind="click: $root.onAddorRemoveTicketSymbol">...</div>
            </div>
       </div>
       </div>

    </div>

    </form>
</body>

</html>

